---
title: 什么是渐进式渲染？
---

渐进式渲染是指用于提高网页性能（特别是提高感知加载时间）的技术，以便尽快渲染内容以供显示。

在宽带互联网普及之前的时代，它曾经非常流行，但它仍然被用于现代开发中，因为移动数据连接变得越来越受欢迎（而且不可靠）！

## 图片的懒加载

页面上的图片不会一次性全部加载。只有当用户滚动到显示图片的页面部分或附近时，才会加载图片。

* `<img loading="lazy">` 是一种现代方式，指示浏览器推迟加载屏幕外的图像，直到用户滚动到它们附近。
* 使用 JavaScript 监视滚动位置，并在图像即将出现在屏幕上时加载图像（通过将图像的坐标与滚动位置进行比较）。

## 优先显示可见内容（或首屏渲染）

仅包含用户浏览器中将首先渲染的页面所需的最少 CSS/内容/脚本，以便尽快显示，然后您可以使用延迟脚本或监听 `DOMContentLoaded`/`load` 事件来加载其他资源和内容。

## 异步 HTML 片段

在后端构建页面时，将 HTML 的部分内容刷新到浏览器。有关该技术的更多详细信息，请参阅[此处](https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/)。

## 其他现代技术

* [渐进式水合](https://www.patterns.dev/posts/progressive-hydration/)
* [流式服务器端渲染](https://www.patterns.dev/posts/server-side-rendering/)
* [选择性水合](https://www.patterns.dev/posts/react-selective-hydration/)
